<template>
  <div class="m-leadTabFrom m-dialog">
    <el-form :model="form.data" :inline="true" ref="addRowDataForm" :rules="form.rules" label-position="left"
             label-width="140px">
      <div class="flex row-towItem">
        <div>
          <el-form-item label="姓名">
            <el-input v-model="form.data.realName" disabled></el-input>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="称谓" prop="title">
            <el-select v-model="form.data.title" placeholder="请选择" disabled>
              <el-option label="先生" value="0081"></el-option>
              <el-option label="女士" value="0082"></el-option>
              <el-option label="太太" value="0083"></el-option>
              <el-option label="小姐" value="0084"></el-option>
            </el-select>
          </el-form-item>
        </div>
      </div>
      <div class="flex row-towItem">
        <div>
          <el-form-item label="国籍">
            <el-input v-model="form.data.nationality" disabled></el-input>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="出生日期" prop="birthdayStr" v-if="form.data.birthdayStr=='******'">
            <el-input v-model="form.data.birthdayStr" disabled></el-input>
          </el-form-item>
          <el-form-item label="出生日期" v-else>
            <el-date-picker
              disabled
              v-model="form.data.birthdayStr"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              type="date"
              :editable="false"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </div>
      </div>
      <div class="flex row-towItem">
        <div>
          <el-form-item label="证明文件">
            <el-select v-model="form.data.paperType" placeholder="请选择" disabled>
              <el-option label="身份证" value="0111"></el-option>
              <el-option label="护照" value="0112"></el-option>
              <el-option label="商业登记证" value="0113"></el-option>
              <el-option label="其他" value="0114"></el-option>
            </el-select>
            <!--<el-input v-model="form.data.paperType" disabled></el-input>-->
          </el-form-item>
        </div>
        <div>
          <el-form-item label="签发国家">
            <el-input v-model="form.data.paperCountry" disabled></el-input>
          </el-form-item>
        </div>
      </div>
      <div>
        <el-form-item label="证件号码">
          <el-input v-model="form.data.paperNo" disabled></el-input>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="身份证所属地">
          <el-input v-model="form.data.idCardPlace" disabled></el-input>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="手机号">
          <el-input v-model="form.data.phone" disabled></el-input>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="手机号码归属地">
          <el-input v-model="form.data.phonePlace" disabled></el-input>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="其他手机号">
          <el-input v-model="form.data.otherPhone" :clearable="isEdit && form.data.otherPhone != '******'"
                    :disabled="!isEdit || form.data.otherPhone == '******'"></el-input>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="其他手机号码归属地">
          <el-input v-model="form.data.otherPhonePlace" disabled></el-input>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="电邮地址">
          <el-input v-model="form.data.email" disabled></el-input>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="QQ" prop="qq">
          <el-input v-model="form.data.qq" :clearable="isEdit && form.data.qq != '******'"
                    :disabled="!isEdit || form.data.qq == '******'"></el-input>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="WeChat">
          <el-input v-model="form.data.wechat" :clearable="isEdit && form.data.wechat != '******'"
                    :disabled="!isEdit || form.data.wechat == '******'"></el-input>
        </el-form-item>
      </div>
      <div class="flex row-towItem">
        <div>
          <el-form-item label="IP">
            <el-input v-model="form.data.ip" disabled></el-input>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="IP归属地">
            <el-input v-model="form.data.ipPlace" disabled></el-input>
          </el-form-item>
        </div>
      </div>
      <div class="flex row-towItem">
        <div>
          <el-form-item label="模拟账号标识">
            <el-input v-model="form.data.demoTag" disabled></el-input>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="真实账号标识">
            <el-input v-model="form.data.realAccountTag" disabled></el-input>
          </el-form-item>
        </div>
      </div>
      <div class="flex row-towItem">
        <div>
          <el-form-item label="支付网关标记">
            <el-input v-model="form.data.payGwTag" disabled></el-input>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="支付验证标记">
            <el-input v-model="form.data.payChkTag" disabled></el-input>
          </el-form-item>
        </div>
      </div>
      <div>
        <el-form-item label="标记">
          <el-select v-model="showLabel" multiple placeholder="请选择" disabled>
            <el-option v-for="item in showLabel" :label="item" :value="item" :key="item"></el-option>
          </el-select>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="分配给" prop="assigner">
          <el-select
            :disabled="!isEdit"
            :clearable="isEdit"
            v-model="form.data.assigner"
            filterable
            remote
            reserve-keyword
            :remote-method="remoteUserMethod"
            placeholder="请输入关键词"
          >
            <el-option
              v-for="item in userList"
              :label="item._id"
              :key="item._id"
              :value="item._id">
            </el-option>
          </el-select>
        </el-form-item>
      </div>
      <div class="activeBtns" v-if="isEdit">
        <el-button plain @click="$router.go(-1)">取消</el-button>
        <el-button type="primary" @click="submit" :loading="addLoading">更新</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
  import * as RealaccountAPI from '@/Api/realaccount'
  import * as UserAPI from '@/Api/user'
  import * as Utils from '@/utils'
  export default {
    name: 'TheAccountDetailsInfo',
    data () {
      return {
        form: {
          data: {},
          rules: {
            qq: [
              {max: 15, trigger: 'blur', message: 'qq格式错误'},
            ]
          }
        },
        copyForm: null,
        addLoading:false,
        userList: [],
        showLabel: []
      }
    },
    computed: {
      isEdit(){
        if (this.$route.query.type && this.$route.query.type == 'edit') {
          return true;
        } else {
          return false;
        }
      }
    },
    methods: {
      queryList(){
        RealaccountAPI.realaccountInfo11({
          id: this.$route.params.id.split("_")[0],
        })
          .then(res => {
            if (res.code != 0) {
              this.$notify({
                title: '温馨提示',
                message: res.msg,
                type: 'warning'
              })
              return;
            }
            this.form.data = res.data;
            if (res.data.labels && res.data.labels.length > 0) {
              let _arr = [];
              res.data.labels.split(',').forEach(item => {
                _arr.push(item.split('|')[1]);
              })
              this.showLabel = _arr;
            }
            this.copyForm = Object.assign({}, res.data);
          })
          .catch(error => {
            console.log(error)
          })
      },
      remoteUserMethod(queryStr) {
        if (queryStr != '') {
          UserAPI.userNickname({
            input: queryStr
          })
            .then(res => {
              if (res.code != '0') {
                this.$notify({
                  title: '温馨提示',
                  message: res.msg,
                  type: 'warn'
                })
                return;
              }
              this.userList = res.data;
            })
            .catch(error => {
              console.log(error)
            })
        }

      },
      submit() {
        this.$refs.addRowDataForm.validate(flg => {
          if (!flg) {
            return;
          }
          this.addLoading = true;
          let _params = {
            id: this.form.data.id,
            otherPhone: this.form.data.otherPhone,
            srcOtherPhone: this.copyForm.otherPhone,
            qq: this.form.data.qq,
            srcQq: this.copyForm.qq,
            wechat: this.form.data.wechat,
            srcWechat: this.copyForm.wechat,
            assigner: this.form.data.assigner,
            srcAssigner: this.copyForm.assigner
          }
          for (let key in _params) {
            if (_params[key] == '******') {
              delete _params[key]
            }
          }
          /*
           * query.type  edit编辑模式
           * query.from  desktop 来自我的桌面
           * query.group  a 分配给我的  b 我关注的
           *
           * */
          let ajaxAddress = null;
          if(this.$route.query.from == 'desktop') {
            if(this.$route.query.group == 'a') {
              ajaxAddress =  RealaccountAPI.iarealaccountBaseEdit;
            } else  {
              ajaxAddress =  RealaccountAPI.ifrealaccountBaseEdit;
            }
          } else {
            ajaxAddress = RealaccountAPI.realaccountBaseEdit;
          }

          ajaxAddress(_params)
            .then(res => {
              this.addLoading = false;
              if (res.code != 0) {
                this.$notify.warning({
                  title: '温馨提示',
                  message: res.msg
                })
                return;
              }
              this.$message({
                type: 'success',
                message: '修改成功!'
              });
              this.queryList();
            })
            .catch(error => {
              this.addLoading = false;
              console.log(error)
            })
        })
      },
    },
    created(){
      this.queryList();
    },
  }
</script>

<style scoped lang="scss">
.m-leadTabFrom{
  width: 800px;
}
</style>
